<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.1.1
Version: 2.0.2
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->

<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<head>
  <meta charset="utf-8">
  <title>Forms | Metronic Shop UI</title>

  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta content="Metronic Shop UI description" name="description">
  <meta content="Metronic Shop UI keywords" name="keywords">
  <meta content="keenthemes" name="author">

  <meta property="og:site_name" content="-CUSTOMER VALUE-">
  <meta property="og:title" content="-CUSTOMER VALUE-">
  <meta property="og:description" content="-CUSTOMER VALUE-">
  <meta property="og:type" content="website">
  <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
  <meta property="og:url" content="-CUSTOMER VALUE-">

  <link rel="shortcut icon" href="favicon.ico">
  <link href="/favicon.ico" rel="SHORTCUT ICON" type="image/ico">

  <!-- Fonts START -->
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all" rel="stylesheet" type="text/css">
  <!-- Fonts END -->

  <!-- Global styles START -->       
  <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <!-- Global styles END --> 
   
  <!-- Page level plugin styles START -->
  <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
  <link href="assets/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
  <link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
  <!-- Page level plugin styles END -->

  <!-- Theme styles START -->
  <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css">
  <link href="assets/css/style.css" rel="stylesheet" type="text/css">
  <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css">  
  <link href="assets/css/custom.css" rel="stylesheet" type="text/css">
  <!-- Theme styles END -->
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body>
    <!-- BEGIN TOP BAR -->
    <div class="pre-header">
        <div class="container">
            <div class="row">
                <!-- BEGIN TOP BAR LEFT PART -->
                <div class="col-md-6 col-sm-6 additional-shop-info">
                    <ul class="list-unstyled list-inline">
                        <li><i class="fa fa-phone"></i><span>+1 456 6717</span></li>
                        <!-- BEGIN CURRENCIES -->
                        <li class="shop-currencies">
                            <a href="javascript:void(0);">€</a>
                            <a href="javascript:void(0);">£</a>
                            <a href="javascript:void(0);" class="current">$</a>
                        </li>
                        <!-- END CURRENCIES -->
                        <!-- BEGIN LANGS -->
                        <li class="langs-block">
                            <a href="javascript:void(0);" class="current">English <i class="fa fa-angle-down"></i></a>
                            <div class="langs-block-others-wrapper"><div class="langs-block-others">
                              <a href="javascript:void(0);">French</a>
                              <a href="javascript:void(0);">Germany</a>
                              <a href="javascript:void(0);">Turkish</a>
                            </div></div>
                        </li>
                        <!-- END LANGS -->
                    </ul>
                </div>
                <!-- END TOP BAR LEFT PART -->
                <!-- BEGIN TOP BAR MENU -->
                <div class="col-md-6 col-sm-6 additional-nav">
                    <ul class="list-unstyled list-inline pull-right">
                        <li><a href="#">My Account</a></li>
                        <li><a href="#">My Wishlist</a></li>
                        <li><a href="checkout.html">Checkout</a></li>
                        <li><a href="login-page.html">Log In</a></li>
                    </ul>
                </div>
                <!-- END TOP BAR MENU -->
            </div>
        </div>        
    </div>
    <!-- END TOP BAR -->

    <!-- BEGIN HEADER -->
    <div role="navigation" class="navbar header no-margin">
        <div class="container">
            <div class="navbar-header">
                <!-- BEGIN RESPONSIVE MENU TOGGLER -->
                <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- END RESPONSIVE MENU TOGGLER -->
                <a href="index.html" class="navbar-brand"><img src="assets/img/logo_red.png" alt="Metronic Shop UI"></a><!-- LOGO -->
            </div>
            <!-- BEGIN CART -->
            <div class="cart-block">
                <div class="cart-info">
                    <a href="javascript:void(0);" class="cart-info-count">3 items</a>
                    <a href="javascript:void(0);" class="cart-info-value">$1260</a>
                </div>
                <i class="fa fa-shopping-cart"></i>
                <!-- BEGIN CART CONTENT -->
                <div class="cart-content-wrapper">
                  <div class="cart-content">
                    <ul class="scroller" style="height: 250px;">
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                       <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                       <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                    </ul>
                    <div class="text-right">
                      <a href="shopping-cart.html" class="btn btn-default">View Cart</a>
                      <a href="checkout.html" class="btn btn-primary">Checkout</a>
                    </div>
                  </div>
                </div>
                <!-- END CART CONTENT -->
            </div>
            <!-- END CART -->
            <!-- BEGIN NAVIGATION -->
            <div class="collapse navbar-collapse mega-menu">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-delay="0" data-close-others="false" data-target="product-list.html" href="product-list.html">
                        Woman 
                        <i class="fa fa-angle-down"></i>
                      </a>
                      <!-- BEGIN DROPDOWN MENU -->
                      <ul class="dropdown-menu" aria-labelledby="mega-menu">
                        <li>
                          <div class="nav-content">
                            <!-- BEGIN DROPDOWN MENU - COLUMN -->
                            <div class="nav-content-col">
                              <h3>Footwear</h3>
                              <ul>
                                <li><a href="product-list.html">Astro Trainers</a></li>
                                <li><a href="product-list.html">Basketball Shoes</a></li>
                                <li><a href="product-list.html">Boots</a></li>
                                <li><a href="product-list.html">Canvas Shoes</a></li>
                                <li><a href="product-list.html">Football Boots</a></li>
                                <li><a href="product-list.html">Golf Shoes</a></li>
                                <li><a href="product-list.html">Hi Tops</a></li>
                                <li><a href="product-list.html">Indoor and Court Trainers</a></li>
                              </ul>
                            </div>
                            <!-- END DROPDOWN MENU - COLUMN -->
                            <!-- BEGIN DROPDOWN MENU - COLUMN -->
                            <div class="nav-content-col">
                              <h3>Clothing</h3>
                              <ul>
                                <li><a href="product-list.html">Base Layer</a></li>
                                <li><a href="product-list.html">Character</a></li>
                                <li><a href="product-list.html">Chinos</a></li>
                                <li><a href="product-list.html">Combats</a></li>
                                <li><a href="product-list.html">Cricket Clothing</a></li>
                                <li><a href="product-list.html">Fleeces</a></li>
                                <li><a href="product-list.html">Gilets</a></li>
                                <li><a href="product-list.html">Golf Tops</a></li>
                              </ul>
                            </div>
                            <!-- END DROPDOWN MENU - COLUMN -->
                            <!-- BEGIN DROPDOWN MENU - COLUMN -->
                            <div class="nav-content-col">
                              <h3>Accessories</h3>
                              <ul>
                                <li><a href="product-list.html">Belts</a></li>
                                <li><a href="product-list.html">Caps</a></li>
                                <li><a href="product-list.html">Gloves, Hats and Scarves</a></li>
                              </ul>

                              <h3>Clearance</h3>
                              <ul>
                                <li><a href="product-list.html">Jackets</a></li>
                                <li><a href="product-list.html">Bottoms</a></li>
                              </ul>
                            </div>
                            <!-- END DROPDOWN MENU - COLUMN -->
                            <!-- BEGIN DROPDOWN MENU - BRANDS -->
                            <div class="nav-brands">
                              <ul>
                                <li><a href="product-list.html"><img title="esprit" alt="esprit" src="assets/temp/brands/esprit.jpg"></a></li>
                                <li><a href="product-list.html"><img title="gap" alt="gap" src="assets/temp/brands/gap.jpg"></a></li>
                                <li><a href="product-list.html"><img title="next" alt="next" src="assets/temp/brands/next.jpg"></a></li>
                                <li><a href="product-list.html"><img title="puma" alt="puma" src="assets/temp/brands/puma.jpg"></a></li>
                                <li><a href="product-list.html"><img title="zara" alt="zara" src="assets/temp/brands/zara.jpg"></a></li>
                              </ul>
                            </div>
                            <!-- END DROPDOWN MENU - BRANDS -->
                          </div>
                        </li>
                      </ul>
                      <!-- END DROPDOWN MENU -->
                    </li>
                    <li><a href="product-list.html">Men</a></li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-delay="0" data-close-others="false" data-target="product-list.html" href="product-list.html">
                        Kids
                        <i class="fa fa-angle-down"></i>
                      </a>
                      <!-- BEGIN DROPDOWN MENU -->
                      <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                          <a href="product-list.html">Hi Tops <i class="fa fa-angle-right"></i></a>
                          <ul class="dropdown-menu">
                            <li><a href="product-list.html">Second Level Link</a></li>
                            <li><a href="product-list.html">Second Level Link</a></li>
                            <li class="dropdown-submenu">
                              <a href="product-list.html">Second Level Link <i class="fa fa-angle-right"></i></a>
                              <ul class="dropdown-menu">
                                <li><a href="product-list.html">Third Level Link</a></li>
                                <li><a href="product-list.html">Third Level Link</a></li>
                                <li><a href="product-list.html">Third Level Link</a></li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                        <li><a href="product-list.html">Running Shoes</a></li>
                        <li><a href="product-list.html">Jackets and Coats</a></li>
                        <li><a href="product-list.html">Tennis Clothing</a></li>
                        <li class="dropdown-submenu">
                          <a href="product-list.html">Running Clothing <i class="fa fa-angle-right"></i></a>
                          <ul class="dropdown-menu">
                            <li><a href="product-list.html">Second Level Link</a></li>
                            <li><a href="product-list.html">Second Level Link</a></li>
                            <li class="dropdown-submenu">
                              <a href="product-list.html">Second Level Link <i class="fa fa-angle-right"></i></a>
                              <ul class="dropdown-menu">
                                <li><a href="product-list.html">Third Level Link</a></li>
                                <li><a href="product-list.html">Third Level Link</a></li>
                                <li><a href="product-list.html">Third Level Link</a></li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                      </ul>
                      <!-- END DROPDOWN MENU -->
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-delay="0" data-close-others="false" data-target="product-list.html" href="product-list.html">
                        New 
                        <i class="fa fa-angle-down"></i>
                      </a>
                      <!-- BEGIN DROPDOWN MENU -->
                      <ul class="dropdown-menu" aria-labelledby="mega-menu-catalogue">
                        <li>
                          <div class="nav-content">
                            <div class="product-item">
                              <div class="pi-img-wrapper">
                                <a href="item.html"><img src="assets/temp/products/model4.jpg" class="img-responsive" alt="Berry Lace Dress"></a>
                              </div>
                              <h3><a href="item.html">Berry Lace Dress</a></h3>
                              <div class="pi-price">$29.00</div>
                              <a href="#" class="btn btn-default add2cart">Add to cart</a>
                            </div>
                            <div class="product-item">
                              <div class="pi-img-wrapper">
                                <a href="item.html"><img src="assets/temp/products/model3.jpg" class="img-responsive" alt="Berry Lace Dress"></a>
                              </div>
                              <h3><a href="item.html">Berry Lace Dress</a></h3>
                              <div class="pi-price">$29.00</div>
                              <a href="#" class="btn btn-default add2cart">Add to cart</a>
                            </div>
                            <div class="product-item">
                              <div class="pi-img-wrapper">
                                <a href="item.html"><img src="assets/temp/products/model7.jpg" class="img-responsive" alt="Berry Lace Dress"></a>
                              </div>
                              <h3><a href="item.html">Berry Lace Dress</a></h3>
                              <div class="pi-price">$29.00</div>
                              <a href="#" class="btn btn-default add2cart">Add to cart</a>
                            </div>
                          </div>
                        </li>
                      </ul>
                      <!-- END DROPDOWN MENU -->
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-delay="0" data-close-others="false" data-target="#" href="#">
                        Pages
                        <i class="fa fa-angle-down"></i>
                      </a>
                      <!-- BEGIN DROPDOWN MENU -->
                      <ul class="dropdown-menu">
                        <li><a href="index-light-footer.html">Light Footer</a></li>
                        <li><a href="product-list.html">Product List</a></li>
                        <li><a href="search-result.html">Search Result</a></li>
                        <li><a href="item.html">Product Page</a></li>
                        <li><a href="shopping-cart-null.html">Shopping Cart (Null Cart)</a></li>
                        <li><a href="shopping-cart.html">Shopping Cart</a></li>
                        <li><a href="checkout.html">Checkout</a></li>
                        <li><a href="reg-page.html">Registration Page</a></li>
                        <li><a href="login-page.html">Login Page</a></li>
                        <li><a href="forgotton-password.html">Forget Password</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contacts.html">Contacts</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                        <li><a href="privacy-policy.html">Privacy Policy</a></li>
                        <li><a href="terms-conditions-page.html">Terms & Conditions</a></li>
                        <li><a href="site-map.html">Site Map</a></li>
                        <li><a href="page-404.html">404</a></li>
                        <li><a href="page-500.html">500</a></li> 
                      </ul>
                      <!-- END DROPDOWN MENU -->
                    </li>
                    <li class="dropdown active">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-delay="0" data-close-others="false" data-target="#" href="#">
                        Features
                        <i class="fa fa-angle-down"></i>
                      </a>
                      <!-- BEGIN DROPDOWN MENU -->
                      <ul class="dropdown-menu">
                        <li><a href="feature-typography.html">Typography</a></li>
                        <li class="active"><a href="feature-forms.html">Forms</a></li>
                        <li><a href="feature-buttons.html">Buttons</a></li>
                        <li><a href="feature-icons.html">Icons</a></li>
                      </ul>
                      <!-- END DROPDOWN MENU -->
                    </li>
                    <li><a href="http://keenthemes.com/preview/metronic_admin/ecommerce_index.html">Admin theme</a></li>
                    <!-- BEGIN TOP SEARCH -->
                    <li class="menu-search">
                        <span class="sep"></span>
                        <i class="fa fa-search search-btn"></i>
                        <div class="search-box">
                            <form action="#">
                                <div class="input-group">
                                    <input type="text" placeholder="Search" class="form-control">
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary" type="submit">Search</button>
                                    </span>
                                </div>
                            </form>
                        </div> 
                    </li>
                    <!-- END TOP SEARCH -->
                </ul>
            </div>
            <!-- END NAVIGATION -->
        </div>
    </div>
    <!-- END HEADER -->

    <div class="main">
      <div class="container">
        <ul class="breadcrumb">
            <li><a href="index.html">Home</a></li>
            <li><a href="">Store</a></li>
            <li class="active">Forms</li>
        </ul>
        <!-- BEGIN SIDEBAR & CONTENT -->
        <div class="row margin-bottom-20">
          <!-- BEGIN CONTENT -->
          <div class="col-md-12 col-sm-12">
            <h1>Forms</h1>
            <div class="content-page">
      <!-- ROW 1 -->
      <div class="row margin-bottom-40">
            <div class="col-md-6 ">
               <!-- BLOCK START-->
                <div class="panel panel-default">   
                    <div class="panel-heading"><h3 class="panel-title">Default Form</h3></div>
                    <div class="panel-body">
                     <form role="form">
                        <div class="form-body">
                           <div class="form-group">
                              <label for="exampleInputEmail1">Text</label>
                              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter text">
                              <span class="help-block">A block of help text.</span>
                           </div>
                           <div class="form-group">
                              <label >Email Address</label>
                              <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                <input type="text" class="form-control" placeholder="Email Address">
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="exampleInputPassword1">Password</label>
                              <div class="input-group">
                                 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                 <span class="input-group-addon"><i class="fa fa-user"></i></span>
                              </div>
                           </div>

                           <div class="form-group">
                              <label  >Left Icon</label>
                              <div class="input-icon">
                                 <i class="fa fa-bell"></i>
                                 <input type="text" class="form-control"  placeholder="Left icon">
                              </div>
                           </div>

                           <div class="form-group">
                              <label  >Right Icon</label>
                              <div class="input-icon right">
                                 <i class="fa fa-microphone"></i>
                                 <input type="text" class="form-control"  placeholder="Right icon">
                              </div>
                           </div>

                           <div class="form-group">
                              <label  >Input With Spinner</label>
                              <input class="form-control spinner" type="text" placeholder="Process something"/> 
                           </div>
                          
                           <div class="form-group">
                              <label >Static Control</label>
                              <p class="form-control-static">email@example.com</p>
                           </div>
                           <div class="form-group">
                              <label >Disabled</label>
                              <input type="text" class="form-control" placeholder="Disabled" disabled>
                           </div>
                           <div class="form-group">
                              <label >Readonly</label>
                              <input type="text" class="form-control" placeholder="Readonly" readonly>
                           </div>
                           <div class="form-group">
                              <label >Dropdown</label>
                              <select  class="form-control">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Multiple Select</label>
                              <select multiple class="form-control">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Textarea</label>
                              <textarea class="form-control" rows="3"></textarea>
                           </div>
                           <div class="form-group">
                              <label >File input</label>
                              <input type="file" >
                              <p class="help-block">some help text here.</p>
                           </div>
                           <div class="form-group">
                              <label  >Checkboxes</label>
                              <div class="checkbox-list">
                                 <label>
                                 <input type="checkbox"> Checkbox 1
                                 </label>
                                 <label>
                                 <input type="checkbox"> Checkbox 2
                                 </label>
                                  <label>
                                 <input type="checkbox" disabled> Disabled
                                 </label>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  >Inline Checkboxes</label>
                              <div class="checkbox-list">
                                 <label class="checkbox-inline">
                                 <input type="checkbox"  value="option1"> Checkbox 1
                                 </label>
                                 <label class="checkbox-inline">
                                 <input type="checkbox"  value="option2"> Checkbox 2
                                 </label>
                                 <label class="checkbox-inline">
                                 <input type="checkbox"  value="option3" disabled> Disabled
                                 </label>  
                              </div>
                           </div>
                           <div class="form-group">
                              <label  >Radio</label>
                              <div class="radio-list">
                                 <label>
                                 <input type="radio" name="optionsRadios"  value="option1" checked> Option 1
                                 </label>
                                 <label>
                                 <input type="radio" name="optionsRadios"  value="option2" > Option 2
                                 </label>
                                 <label>
                                 <input type="radio" name="optionsRadios"  value="option3" disabled> Disabled
                                 </label>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  >Inline Radio</label>
                              <div class="radio-list">
                                 <label class="radio-inline">
                                 <input type="radio" name="optionsRadios"  value="option1" checked> Option 1
                                 </label>
                                 <label class="radio-inline">
                                 <input type="radio" name="optionsRadios"  value="option2" > Option 2
                                 </label>
                                 <label class="radio-inline">
                                 <input type="radio" name="optionsRadios"  value="option3" disabled> Disabled
                                 </label>  
                              </div>
                           </div>
                        </div>
                        <div class="form-actions">
                           <button type="submit" class="btn blue">Submit</button>
                           <button type="button" class="btn default">Cancel</button>                              
                        </div>                        
                     </form>
                   </div>
                </div>
               <!-- BLOCK END-->

              
               <!-- BLOCK START -->
               <div class="panel panel-primary">   
                    <div class="panel-heading"><h3 class="panel-title">Default Form Height Sizing</h3></div>
                    <div class="panel-body">
                     <form role="form">
                        <div class="form-body">
                           <div class="form-group">
                              <label >Large Input</label>
                              <input type="text" class="form-control input-lg"  placeholder="input-lg">
                           </div>
                           <div class="form-group">
                              <label >Default Input</label>
                              <input type="text" class="form-control"  placeholder="Default input">
                           </div>
                           <div class="form-group">
                              <label >Small Input</label>
                              <input type="text" class="form-control input-sm"  placeholder="input-sm">
                           </div>
                           <div class="form-group">
                              <label >Large Select</label>
                              <select  class="form-control input-lg">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Default Select</label>
                              <select  class="form-control">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Small Select</label>
                              <select  class="form-control input-sm">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                        </div>
                        <div class="form-actions right">                           
                           <button type="button" class="btn default">Cancel</button>  
                           <button type="submit" class="btn green">Submit</button>                            
                        </div>
                     </form>
                    </div>
                </div>
               <!-- BLOCK END -->

               <!-- BLOCK START -->   
               <div class="panel panel-success">
                  <div class="panel-heading"><h3 class="panel-title">Form Input Width Sizing</h3></div>
                    <div class="panel-body">
                     <form role="form">
                        <div class="form-body">

                            <div class="form-group">
                              <label >Fluid Input</label>
                              <input type="text" class="form-control"  placeholder="fluid">

                              <div class="input-icon right margin-top-10">
                                 <i class="fa fa-check"></i>
                                 <input type="text" class="form-control"  placeholder="fluid">
                              </div>

                              <div class="input-icon margin-top-10">
                                 <i class="fa fa-user"></i>
                                 <input type="text" class="form-control"  placeholder="fluid">
                              </div>

                              <div class="input-group input-large margin-top-10">
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                   <input type="email" class="form-control input-large" placeholder=".input-large">
                                 </div>

                                  <div class="input-group input-large margin-top-10">
                                   <input type="email" class="form-control input-large" placeholder=".input-large">                                   
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                 </div>

                              <hr>

                           </div>

                           <div class="form-group">
                              <label >Extra Large Input</label>
                              <input type="text" class="form-control input-xlarge"  placeholder=".input-xlarge">

                              <div class="input-icon right input-xlarge margin-top-10">
                                 <i class="fa fa-check"></i>
                                 <input type="text" class="form-control"  placeholder=".input-xlarge">
                              </div>

                              <div class="input-icon input-xlarge margin-top-10">
                                 <i class="fa fa-user"></i>
                                 <input type="text" class="form-control"  placeholder=".input-xlarge">
                              </div>

                              <div class="input-group input-xlarge margin-top-10">
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                   <input type="email" class="form-control" placeholder=".input-xlarge">
                                 </div>

                                  <div class="input-group input-xlarge margin-top-10">

                                   <input type="email" class="form-control" placeholder=".input-xlarge">
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                 </div>

                              <hr>

                           </div>
                           <div class="form-group">
                              <label >Large Input</label>
                              <input type="text" class="form-control input-large"  placeholder=".input-large">

                              <div class="input-icon right input-large margin-top-10">
                                 <i class="fa fa-check"></i>
                                 <input type="text" class="form-control"  placeholder=".input-large">
                              </div>

                              <div class="input-icon input-large margin-top-10">
                                 <i class="fa fa-user"></i>
                                 <input type="text" class="form-control"  placeholder=".input-large">
                              </div>

                              <div class="input-group input-large margin-top-10">
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                   <input type="email" class="form-control" placeholder=".input-large">
                                 </div>

                              <div class="input-group input-large margin-top-10">
                                   <input type="email" class="form-control" placeholder=".input-large">                                   
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                 </div>

                              <hr>

                           </div>
                           <div class="form-group">
                              <label >Medium Input</label>
                              <input type="text" class="form-control input-medium"  placeholder=".input-medium">


                              <div class="input-icon right input-medium margin-top-10">
                                 <i class="fa fa-check"></i>
                                 <input type="text" class="form-control"  placeholder=".input-medium">
                              </div>

                              <div class="input-icon input-medium margin-top-10">
                                 <i class="fa fa-user"></i>
                                 <input type="text" class="form-control"  placeholder=".input-medium">
                              </div>

                              <div class="input-group input-medium margin-top-10">
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                   <input type="email" class="form-control" placeholder=".input-medium">
                                 </div>

                              <div class="input-group input-medium margin-top-10">
                                   <input type="email" class="form-control" placeholder=".input-medium">                                   
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                 </div>

                              <hr>

                           </div>
                           <div class="form-group">
                              <label >Small Input</label>
                              <input type="text" class="form-control input-small"  placeholder=".input-small">

                              <div class="input-icon right input-small margin-top-10">
                                 <i class="fa fa-check"></i>
                                 <input type="text" class="form-control"  placeholder=".input-small">
                              </div>

                              <div class="input-icon input-small margin-top-10">
                                 <i class="fa fa-user"></i>
                                 <input type="text" class="form-control"  placeholder=".input-small">
                              </div>

                              <div class="input-group input-small margin-top-10">
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                   <input type="email" class="form-control" placeholder=".input-small">
                                 </div>

                              <div class="input-group input-small margin-top-10">
                                   <input type="email" class="form-control" placeholder=".input-small">                                   
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                 </div>

                           </div>
                           <div class="form-group">
                              <label >Extra Small Input</label>
                              <input type="text" class="form-control input-xsmall"  placeholder=".input-xsmall">
                           </div>
                           <div class="form-group">
                              <label >Extra Large Select</label>
                              <select  class="form-control input-xlarge">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Large Select</label>
                              <select  class="form-control input-large">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Medium Select</label>
                              <select  class="form-control input-medium">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Small Select</label>
                              <select  class="form-control input-small">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Extra Small Select</label>
                              <select  class="form-control input-xsmall">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                        </div>
                        <div class="form-actions right">                           
                           <button type="button" class="btn default">Cancel</button>  
                           <button type="submit" class="btn green">Submit</button>                            
                        </div>
                     </form>
                   </div>
                </div>
               <!-- BLOCK END -->
            </div>
            <div class="col-md-6 ">
               <!-- BLOCK START -->   
               <div class="panel panel-info">
                    <div class="panel-heading"><h3 class="panel-title">Horizontal Form</h3></div>
                    <div class="panel-body">
                     <form class="form-horizontal" role="form">
                        <div class="form-body">
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Text</label>
                              <div class="col-md-9">
                                 <input type="text" class="form-control"  placeholder="Enter text">
                                 <span class="help-block">A block of help text.</span>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Email Address</label>
                              <div class="col-md-9">
                                 <div class="input-group">
                                   <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                   <input type="email" class="form-control" placeholder="Email Address">
                                 </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Password</label>
                              <div class="col-md-9">
                                 <div class="input-group">
                                    <input type="password" class="form-control"  placeholder="Password">
                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                 </div>
                              </div>
                           </div>

                           <div class="form-group">
                              <label  class="col-md-3 control-label">Left Icon</label>
                              <div class="col-md-9">
                                 <div class="input-icon">
                                    <i class="fa fa-bell"></i>
                                    <input type="text" class="form-control"  placeholder="Left icon">
                                 </div>
                              </div>
                           </div>

                           <div class="form-group">
                              <label  class="col-md-3 control-label">Right Icon</label>
                              <div class="col-md-9">
                                 <div class="input-icon right">     
                                    <i class="fa fa-microphone"></i>                             
                                    <input type="text" class="form-control"  placeholder="Right icon">
                                 </div>
                              </div>
                           </div>

                           <div class="form-group">
                              <label  class="col-md-3 control-label">Input With Spinner</label>
                              <div class="col-md-9">
                                 <input type="password" class="form-control spinner"  placeholder="Password">
                              </div>
                           </div>
                          
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Static Control</label>
                              <div class="col-md-9">
                                 <p class="form-control-static">email@example.com</p>
                              </div>
                           </div>

                           <div class="form-group">
                              <label  class="col-md-3 control-label">Disabled</label>
                              <div class="col-md-9">
                                 <input type="password" class="form-control"  placeholder="Disabled" disabled>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Readonly</label>
                              <div class="col-md-9">
                                 <input type="password" class="form-control"  placeholder="Readonly" readonly>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Dropdown</label>
                              <div class="col-md-9">
                                 <select  class="form-control">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                 </select>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Multiple Select</label>
                              <div class="col-md-9">
                                 <select multiple class="form-control">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                 </select>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Textarea</label>
                              <div class="col-md-9">
                                 <textarea class="form-control" rows="3"></textarea>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">File input</label>
                              <div class="col-md-9">
                                 <input type="file" >
                                 <p class="help-block">some help text here.</p>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Checkboxes</label>
                              <div class="col-md-9">
                                 <div class="checkbox-list">
                                    <label>
                                    <input type="checkbox"> Checkbox 1
                                    </label>
                                    <label>
                                    <input type="checkbox"> Checkbox 1
                                    </label>
                                    <label>
                                    <input type="checkbox" disabled> Disabled
                                    </label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Inline Checkboxes</label>
                              <div class="col-md-9">
                                 <div class="checkbox-list">
                                    <label class="checkbox-inline">
                                    <input type="checkbox"  value="option1"> Checkbox 1
                                    </label>
                                    <label class="checkbox-inline">
                                    <input type="checkbox"  value="option2"> Checkbox 2
                                    </label>
                                    <label class="checkbox-inline">
                                    <input type="checkbox"  value="option3" disabled> Disabled
                                    </label>  
                                 </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Radio</label>
                              <div class="col-md-9">
                                 <div class="radio-list">
                                    <label>
                                    <input type="radio" name="optionsRadios"  value="option1" checked> Option 1
                                    </label>
                                    <label>
                                    <input type="radio" name="optionsRadios"  value="option2" checked> Option 2
                                    </label>
                                    <label>
                                    <input type="radio" name="optionsRadios"  value="option2" disabled> Disabled
                                    </label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Inline Radio</label>
                              <div class="col-md-9">
                                 <div class="radio-list">
                                    <label class="radio-inline">
                                    <input type="radio" name="optionsRadios"  value="option1" checked> Option 1
                                    </label>
                                    <label class="radio-inline">
                                    <input type="radio" name="optionsRadios"  value="option2" checked> Option 2
                                    </label>
                                    <label class="radio-inline">
                                    <input type="radio" name="optionsRadios"  value="option3" disabled> Disabled
                                    </label>  
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="form-actions fluid">
                           <div class="col-md-offset-3 col-md-9">
                              <button type="submit" class="btn green">Submit</button>
                              <button type="button" class="btn default">Cancel</button>                              
                           </div>
                        </div>
                     </form>
                    </div>
                </div>
               <!-- BLOCK END -->



               <!-- BLOCK START --> 
               <div class="panel panel-warning">  
                    <div class="panel-heading"><h3 class="panel-title">Horizontal Form Height Sizing</h3></div>
                    <div class="panel-body">
                     <form class="form-horizontal" role="form">
                        <div class="form-body">
                           <div class="form-group">
                              <label class="col-md-3 control-label">Large Input</label>
                              <div class="col-md-9">
                                 <input type="text" class="form-control input-lg"  placeholder="Large Input">
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-3 control-label">Default Input</label>
                              <div class="col-md-9">
                                 <input type="text" class="form-control"  placeholder="Default Input">
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-3 control-label">Small Input</label>
                              <div class="col-md-9">
                                 <input type="text" class="form-control input-sm"  placeholder="Default Input">
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-3 control-label">Large Select</label>
                              <div class="col-md-9">
                                 <select  class="form-control input-lg">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                 </select>
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-3 control-label">Default Select</label>
                              <div class="col-md-9">
                                 <select  class="form-control">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                 </select>
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-3 control-label">Small Select</label>
                              <div class="col-md-9">
                                 <select  class="form-control input-sm">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                 </select>
                              </div>
                           </div>
                        </div>
                        <div class="form-actions right">                           
                           <button type="button" class="btn default">Cancel</button>  
                           <button type="submit" class="btn green">Submit</button>                            
                        </div>
                     </form>
                  </div>
                </div>
               <!-- BLOCK END -->

               <!-- BLOCK START -->   
               <div class="panel panel-danger">
                    <div class="panel-heading"><h3 class="panel-title">Fluid Input Groups</h3></div>
                    <div class="panel-body">
                     <h4 class="block">Checkboxe Addons</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group">
                              <span class="input-group-addon">
                                <input type="checkbox">
                              </span>
                              <input type="text" class="form-control">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group">
                              <input type="text" class="form-control">
                              <span class="input-group-addon">
                                <input type="checkbox">
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Button Addons</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group">
                              <span class="input-group-btn">
                                <button class="btn red" type="button">Go!</button>
                              </span>
                              <input type="text" class="form-control">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group">
                              <input type="text" class="form-control">
                              <span class="input-group-btn">
                                <button class="btn blue" type="button">Go!</button>
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Button Addons On Both Sides</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="input-group">
                              <span class="input-group-btn">
                                <button class="btn red" type="button">Go!</button>
                              </span>
                              <input type="text" class="form-control">
                              <span class="input-group-btn">
                                <button class="btn blue" type="button">Go!</button>
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div>
                     </form>

                     <h4 class="block">Buttons With Dropdowns</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group">
                              <div class="input-group-btn">
                                <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                              <input type="text" class="form-control">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group">
                              <input type="text" class="form-control">
                              <div class="input-group-btn">
                                <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu pull-right">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                      <h4 class="block">Buttons With Dropdowns On Both Sides</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="input-group">
                              <div class="input-group-btn">
                                <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                              <input type="text" class="form-control">
                              <div class="input-group-btn">
                                <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu pull-right">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Segmented Buttons</h4>
                     <form role="form">
                        <div class="row">
                             <div class="col-md-6">
                               <div class="input-group">
                                 <div class="input-group-btn">
                                   <button type="button" class="btn default" tabindex="-1">Action</button>
                                   <button type="button" class="btn default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                     <i class="fa fa-angle-down"></i>
                                   </button>
                                   <ul class="dropdown-menu" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                   </ul>
                                 </div>
                                 <input type="text" class="form-control">
                               </div><!-- /.input-group -->
                             </div><!-- /.col-md-6 -->
                             <div class="col-md-6">
                               <div class="input-group">
                                 <input type="text" class="form-control">
                                 <div class="input-group-btn">
                                   <button type="button" class="btn green" tabindex="-1">Action</button>
                                   <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                     <i class="fa fa-angle-down"></i>
                                   </button>
                                   <ul class="dropdown-menu pull-right" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                   </ul>
                                 </div>
                               </div><!-- /.input-group -->
                             </div><!-- /.col-md-6 -->
                           </div>
                     </form>
                  </div>
                </div>
               <!-- BLOCK END -->


               <!-- BLOCK START -->   
               <div class="panel panel-primary">
                  <div class="panel-heading"><h3 class="panel-title">Fixed Input Groups</h3></div>
                  <div class="panel-body">
                     <h4 class="block">Checkboxe Addons</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <span class="input-group-addon">
                                <input type="checkbox">
                              </span>
                              <input type="text" class="form-control" placeholder=".input-medium">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <input type="text" class="form-control" placeholder=".input-medium">
                              <span class="input-group-addon">
                                <input type="checkbox">
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Button Addons</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <span class="input-group-btn">
                                <button class="btn red" type="button">Go!</button>
                              </span>
                              <input type="text" class="form-control" placeholder=".input-medium">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <input type="text" class="form-control" placeholder=".input-medium">
                              <span class="input-group-btn">
                                <button class="btn blue" type="button">Go!</button>
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Button Addons On Both Sides</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="input-group input-large">
                              <span class="input-group-btn">
                                <button class="btn red" type="button">Go!</button>
                              </span>
                              <input type="text" class="form-control" placeholder=".input-large">
                              <span class="input-group-btn">
                                <button class="btn blue" type="button">Go!</button>
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div>
                     </form>

                     <h4 class="block">Buttons With Dropdowns</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <div class="input-group-btn">
                                <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                              <input type="text" class="form-control" placeholder=".input-medium">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <input type="text" class="form-control" placeholder=".input-medium">
                              <div class="input-group-btn">
                                <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu pull-right">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                      <h4 class="block">Buttons With Dropdowns On Both Sides</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="input-group input-xlarge">
                              <div class="input-group-btn">
                                <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                              <input type="text" class="form-control" placeholder=".input-xlarge">
                              <div class="input-group-btn">
                                <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu pull-right">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Segmented Buttons</h4>
                     <form role="form">
                        <div class="row">
                             <div class="col-md-12">
                               <div class="input-group input-large">
                                 <div class="input-group-btn">
                                   <button type="button" class="btn default" tabindex="-1">Action</button>
                                   <button type="button" class="btn default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                     <i class="fa fa-angle-down"></i>
                                   </button>
                                   <ul class="dropdown-menu" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                   </ul>
                                 </div>
                                 <input type="text" class="form-control" placeholder=".input-large">
                               </div><!-- /.input-group -->
                             </div><!-- /.col-md-6 -->
                        </div>
                     </form>

                     <form role="form" class="margin-top-10">
                        <div class="row">
                             <div class="col-md-12">
                               <div class="input-group input-large">                                 
                                 <input type="text" class="form-control" placeholder=".input-large">
                                 <div class="input-group-btn">
                                   <button type="button" class="btn green" tabindex="-1">Action</button>
                                   <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                     <i class="fa fa-angle-down"></i>
                                   </button>
                                   <ul class="dropdown-menu" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                   </ul>
                                 </div>
                               </div><!-- /.input-group -->
                             </div><!-- /.col-md-6 -->
                        </div>
                     </form>
                  </div>
                </div>
               <!-- BLOCK END -->

               <!-- BLOCK START -->
               <div class="panel panel-success">
                <div class="panel-heading"><h3 class="panel-title">Validation States</h3></div>
                <div class="panel-body">
                     <form role="form">
                        <div class="form-body">
                           <div class="form-group has-success">
                             <label class="control-label" for="inputSuccess">Input with success</label>
                             <input type="text" class="form-control" id="inputSuccess">
                           </div>
                           <div class="form-group has-warning">
                             <label class="control-label" for="inputWarning">Input with warning</label>
                             <input type="text" class="form-control" id="inputWarning">
                           </div>
                           <div class="form-group has-error">
                             <label class="control-label" for="inputError">Input with error</label>
                             <input type="text" class="form-control" id="inputError">
                           </div>
                        </div>
                        <div class="form-actions">                           
                           <button type="button" class="btn default">Cancel</button>  
                           <button type="submit" class="btn red">Submit</button>                            
                        </div>
                     </form>
                  </div>
                </div>
               <!-- BLOCK END -->

               <!-- BLOCK START -->
               <div class="panel panel-info">
                <div class="panel-heading"><h3 class="panel-title">Validation States With Icons</h3></div>
                <div class="panel-body">
                     <form role="form">
                        <div class="form-body">
                           <div class="form-group">
                             <label class="control-label" for="inputSuccess">Default input</label>
                             <div class="input-icon right">
                                 <i class="fa fa-info-circle tooltips" data-original-title="Email address" data-container="body"></i>
                                 <input type="text" class="form-control" >
                             </div>
                           </div>
                           <div class="form-group has-success">
                             <label class="control-label" for="inputSuccess">Input with success</label>
                             <div class="input-icon right">
                                 <i class="fa fa-check  tooltips" data-original-title="You look OK!" data-container="body"></i>
                                 <input type="text" class="form-control" >
                             </div>
                           </div>
                           <div class="form-group has-warning">
                             <label class="control-label" for="inputWarning">Input with warning</label>
                             <div class="input-icon right">
                                 <i class="fa fa-warning tooltips" data-original-title="please provide an email" data-container="body"></i>
                                 <input type="text" class="form-control" >
                             </div>
                           </div>
                           <div class="form-group has-error">
                             <label class="control-label" for="inputError">Input with error</label>
                             <div class="input-icon right">
                                 <i class="fa fa-exclamation tooltips" data-original-title="please write a valid email" data-container="body"></i>
                                 <input type="text" class="form-control" >
                             </div>
                           </div>
                        </div>
                        <div class="form-actions right">                           
                           <button type="button" class="btn default">Cancel</button>  
                           <button type="submit" class="btn green">Submit</button>                            
                        </div>
                     </form>
                    </div>
                </div>
               <!-- BLOCK END -->

               <!-- BLOCK START -->
               <div class="panel panel-warning">
                <div class="panel-heading"><h3 class="panel-title">Horizontal Form Validation States</h3></div>
                    <div class="panel-body">
                     <form role="form" class="form-horizontal">
                        <div class="form-body">
                           <div class="form-group">
                             <label class="col-md-4 control-label" for="inputSuccess">Default input</label>
                             <div class="col-md-8">
                                <div class="input-icon right">
                                    <i class="fa fa-info tooltips" data-original-title="Email address" data-container="body"></i>
                                    <input type="text" class="form-control" >
                                </div>
                             </div>
                           </div>
                           <div class="form-group has-success">
                             <label class="col-md-4 control-label" for="inputSuccess">Input with success</label>
                             <div class="col-md-8">
                                <div class="input-icon right"> 
                                       <i class="fa fa-check tooltips" data-original-title="You look OK!" data-container="body"></i>
                                       <input type="text" class="form-control" >
                                </div>
                             </div>
                           </div>
                           <div class="form-group has-warning">
                             <label class="col-md-4 control-label" for="inputWarning">Input with warning</label>
                             <div class="col-md-8">
                                <div class="input-icon right">
                                    <i class="fa fa-warning tooltips" data-original-title="please provide an email" data-container="body"></i>
                                    <input type="text" class="form-control" >
                                </div>
                             </div>
                           </div>
                           <div class="form-group has-error">
                             <label class="col-md-4 control-label" for="inputError">Input with error</label>
                             <div class="col-md-8">
                                <div class="input-icon right">
                                    <i class="fa fa-exclamation tooltips" data-original-title="please write a valid email" data-container="body"></i>
                                    <input type="text" class="form-control" >
                                </div>
                             </div>
                           </div>
                        </div>
                        <div class="form-actions fluid">   
                           <div class="col-md-offset-4 col-md-8">                        
                              <button type="button" class="btn default">Cancel</button>  
                              <button type="submit" class="btn blue">Submit</button> 
                           </div>                           
                        </div>
                     </form>
                    </div>
                  </div>
                 <!-- BLOCK END -->

            </div>
      </div>
      <!-- END ROW 1 -->
            </div>
          </div>
          <!-- END CONTENT -->
        </div>
        <!-- END SIDEBAR & CONTENT -->
      </div>
    </div>

    <!-- BEGIN BRANDS -->
    <div class="brands">
      <div class="container">
        <div class="row">
          <div class="bxslider-wrapper">
            <ul class="bxslider" data-slides-phone="1" data-slides-tablet="3" data-slides-desktop="6" data-slide-margin="15">
              <li><a href="#"><img src="assets/temp/brands/canon.jpg" alt="canon" title="canon"></a></li>
              <li><a href="#"><img src="assets/temp/brands/esprit.jpg" alt="esprit" title="esprit"></a></li>
              <li><a href="#"><img src="assets/temp/brands/gap.jpg" alt="gap" title="gap"></a></li>
              <li><a href="#"><img src="assets/temp/brands/next.jpg" alt="next" title="next"></a></li>
              <li><a href="#"><img src="assets/temp/brands/puma.jpg" alt="puma" title="puma"></a></li>
              <li><a href="#"><img src="assets/temp/brands/zara.jpg" alt="zara" title="zara"></a></li>
              <li><a href="#"><img src="assets/temp/brands/canon.jpg" alt="canon" title="canon"></a></li>
              <li><a href="#"><img src="assets/temp/brands/esprit.jpg" alt="esprit" title="esprit"></a></li>
              <li><a href="#"><img src="assets/temp/brands/gap.jpg" alt="gap" title="gap"></a></li>
              <li><a href="#"><img src="assets/temp/brands/next.jpg" alt="next" title="next"></a></li>
              <li><a href="#"><img src="assets/temp/brands/puma.jpg" alt="puma" title="puma"></a></li>
              <li><a href="#"><img src="assets/temp/brands/zara.jpg" alt="zara" title="zara"></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- END BRANDS -->

    <!-- BEGIN STEPS -->
    <div class="steps3 steps3red">
      <div class="container">
        <div class="row">
          <div class="col-md-4 steps3-col">
            <i class="fa fa-truck"></i>
            <div>
              <h2>Free shipping</h2>
              <em>Express delivery withing 3 days</em>
            </div>
            <span>&nbsp;</span>
          </div>
          <div class="col-md-4 steps3-col">
            <i class="fa fa-gift"></i>
            <div>
              <h2>Daily Gifts</h2>
              <em>3 Gifts daily for lucky customers</em>
            </div>
            <span>&nbsp;</span>
          </div>
          <div class="col-md-4 steps3-col">
            <i class="fa fa-phone"></i>
            <div>
              <h2>477 505 8877</h2>
              <em>24/7 customer care available</em>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END STEPS -->

    <!-- BEGIN PRE-FOOTER -->
    <div class="pre-footer">
      <div class="container">
        <div class="row">
          <!-- BEGIN BOTTOM ABOUT BLOCK -->
          <div class="col-md-3 col-sm-6 pre-footer-col">
            <h2>About us</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam sit nonummy nibh euismod tincidunt ut laoreet dolore magna aliquarm erat sit volutpat. Nostrud exerci tation ullamcorper suscipit lobortis nisl aliquip  commodo consequat. </p>
            <p>Duis autem vel eum iriure dolor vulputate velit esse molestie at dolore.</p>
          </div>
          <!-- END BOTTOM ABOUT BLOCK -->
          <!-- BEGIN BOTTOM INFO BLOCK -->
          <div class="col-md-3 col-sm-6 pre-footer-col">
            <h2>Information</h2>
            <ul class="list-unstyled">
              <li><i class="fa fa-angle-right"></i> <a href="#">Delivery Information</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="#">Customer Service</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="#">Order Tracking</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="#">Shipping & Returns</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="contacts.html">Contact Us</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="#">Careers</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="#">Payment Methods</a></li>
            </ul>
          </div>
          <!-- END INFO BLOCK -->
          <!-- BEGIN TWITTER BLOCK --> 
          <div class="col-md-3 col-sm-6 pre-footer-col">
            <h2>Latest Tweets</h2>
            <dl class="dl-horizontal f-twitter">
              <dt><i class="fa fa-twitter"></i></dt>
              <dd>
                <a href="#">@keenthemes</a>
                Imperdiet condimentum diam dolor lorem sit consectetur adipiscing
                <span>3 min ago</span>
              </dd>
            </dl>                    
            <dl class="dl-horizontal f-twitter">
              <dt><i class="fa fa-twitter"></i></dt>
              <dd>
                <a href="#">@keenthemes</a>
                Imperdiet condimentum diam dolor lorem sit consectetur adipiscing
                <span>3 min ago</span>
              </dd>
            </dl> 
            <dl class="dl-horizontal f-twitter">
              <dt><i class="fa fa-twitter"></i></dt>
              <dd>
                <a href="#">@keenthemes</a>
                Imperdiet condimentum diam dolor lorem sit consectetur adipiscing
                <span>3 min ago</span>
              </dd>
            </dl>           
          </div>
          <!-- END TWITTER BLOCK -->
          <!-- BEGIN BOTTOM CONTACTS -->
          <div class="col-md-3 col-sm-6 pre-footer-col">
            <h2>Our Contacts</h2>
            <address class="margin-bottom-40">
              35, Lorem Lis Street, Park Ave<br>
              California, US<br>
              Phone: 300 323 3456<br>
              Fax: 300 323 1456<br>
              Email: <a href="mailto:info@metronic.com">info@metronic.com</a><br>
              Skype: <a href="skype:metronic">metronic</a>
            </address>
          </div>
          <!-- END BOTTOM CONTACTS -->
        </div>
        <hr>
        <div class="row">
          <!-- BEGIN SOCIAL ICONS -->
          <div class="col-md-6 col-sm-6">
            <ul class="social-icons">
              <li><a class="rss" data-original-title="rss" href="#"></a></li>
              <li><a class="facebook" data-original-title="facebook" href="#"></a></li>
              <li><a class="twitter" data-original-title="twitter" href="#"></a></li>
              <li><a class="googleplus" data-original-title="googleplus" href="#"></a></li>
              <li><a class="linkedin" data-original-title="linkedin" href="#"></a></li>
              <li><a class="youtube" data-original-title="youtube" href="#"></a></li>
              <li><a class="vimeo" data-original-title="vimeo" href="#"></a></li>
              <li><a class="skype" data-original-title="skype" href="#"></a></li>
            </ul>
          </div>
          <!-- END SOCIAL ICONS -->
          <!-- BEGIN NEWLETTER -->
          <div class="col-md-6 col-sm-6">
            <div class="pre-footer-subscribe-box pull-right">
              <h2>Newsletter</h2>
              <form action="#">
                <div class="input-group">
                  <input type="text" placeholder="youremail@mail.com" class="form-control">
                  <span class="input-group-btn">
                    <button class="btn btn-primary" type="submit">Subscribe</button>
                  </span>
                </div>
              </form>
            </div> 
          </div>
          <!-- END NEWLETTER -->
        </div>
      </div>
    </div>
    <!-- END PRE-FOOTER -->

    <!-- BEGIN FOOTER -->
    <div class="footer padding-top-15">
      <div class="container">
        <div class="row">
          <!-- BEGIN COPYRIGHT -->
          <div class="col-md-6 col-sm-6 padding-top-10">
            2014 © Metronic Shop UI. ALL Rights Reserved. 
          </div>
          <!-- END COPYRIGHT -->
          <!-- BEGIN PAYMENTS -->
          <div class="col-md-6 col-sm-6">
            <ul class="list-unstyled list-inline pull-right margin-bottom-15">
              <li><img src="assets/img/payments/western-union.jpg" alt="We accept Western Union" title="We accept Western Union"></li>
              <li><img src="assets/img/payments/american-express.jpg" alt="We accept American Express" title="We accept American Express"></li>
              <li><img src="assets/img/payments/MasterCard.jpg" alt="We accept MasterCard" title="We accept MasterCard"></li>
              <li><img src="assets/img/payments/PayPal.jpg" alt="We accept PayPal" title="We accept PayPal"></li>
              <li><img src="assets/img/payments/visa.jpg" alt="We accept Visa" title="We accept Visa"></li>
            </ul>
          </div>
          <!-- END PAYMENTS -->
        </div>
      </div>
    </div>
    <!-- END FOOTER -->

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->  
    <script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
    <script type="text/javascript" src="assets/plugins/back-to-top.js"></script>    
    <script type="text/javascript" src="assets/plugins/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
    <script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.min.js"></script><!-- slider for products -->
    <script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>

    <script type="text/javascript" src="assets/scripts/app.js"></script>   
    <script type="text/javascript">
      jQuery(document).ready(function() {
        App.init();
        App.initBxSlider();
        App.initUniform(); 
      });
    </script>
    <!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>